<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./vue.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model='msg' />
			<p>{{msg}}</p>
			<!-- 一次插值 -->
			<p v-once>{{msg}}</p>
			<span v-html="contentHtml"></span><br/>
			<span>{{contentHtml}}</span>
			<!-- 元素绑定 -->
			<img v-bind:src="imgUrl" >
			<a :href="mxgUrl">跳转</a>
			<!-- 事件绑定 -->
			<button type="button" v-on:click="add">点赞{{num1}}</button>
			<button type="button" @click="sub">踩{{num2}}</button>
			<script type="text/javascript">
				var vm = new Vue({
					el:"#app",
					data:{
						msg:"yuan",
						contentHtml: `<span style="color:red">此内容为红色字体
						                    
						                    </span>`,
						imgUrl: 'https://cn.vuejs.org/images/logo.png',
						mxgUrl: 'http://www.runoob.com',
						num1:0,
						num2:0
					},
					methods:{
						add(){
							this.num1++;
						},
						sub(){
							this.num2++;
						}
					}
				})
			</script>
		</div>
	</body>
</html>
